<template>
	<view class="wrap">
		<template v-if='logged'>
			<view class="cartGoodsList u-p-b-80" v-if="goodsList.length">
				<u-checkbox-group v-model="checkList" placement="column" @change="checkChange">
					<view class="cartGoods u-flex u-p-15" v-for="(item,index) in goodsList" :key='index'>
						
						<view class="goodsInfo u-flex u-p-10" >
							<u--image @click="details(item.goods_id)" width="200rpx" height="200rpx" :src="item.goods.cover_url" shape="circle">
							</u--image>
							<view class="goodsBaseInfo u-flex u-row-between u-col-top u-p-10">
								<view class="priceNum" @click="details(item.goods_id)">
									<text class="title u-p-l-10 u-font-32">{{item.goods.title}}</text>
									<br>
									<text class="small">{{item.goods.description}}</text>
									
								</view>
								<view class="priceNum u-flex u-row-between">
									<text class="price u-font-34">￥{{item.goods.price}}</text>
									
									<u-icon name="trash" size="36" color="#e83333" @click="reMove(item.id)"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
				
			</view>
			<!-- 购物车没有内容时给一个提示 -->
			<view class="" v-else>
				<u-empty text="购物车空空如也" mode="car"></u-empty>
			</view>
		</template>
		<template v-else>
			<!-- 提示无权限 -->
			<u-empty mode="permission" text="请登录后查看"></u-empty>
		</template>
	</view>
</template>

<script>
	let access_token;
	export default {
		data() {
			return {
				checkList: [],
				goodsList: [],
				logged: false, //表示是否处于登录状态
			}
		},
		onShow() {
			access_token = uni.getStorageSync('access_token');
			if (access_token) {
				this.logged = true;
			}
			//console.log(access_token);
			this.getData();
		},
		computed:{
			disabled(){
				//some
				return this.goodsList.some((goods)=>{
					return goods.is_checked;
				})
			}
			,
			
		},
		methods: {
			
			details(id){
				uni.$u.route('/pages/goods/detail',{id:id})
			},
			
			async reMove(id) {
				//console.log(id);
				const res = await uni.$u.http.delete(`/api/carts/${id}`, {}, {
					header: {
						Authorization: 'bearer ' + access_token
					}
				})
				if (res === false) {
					uni.$u.toast('更新数据库出错');		
					return;
				}
				this.getData();
			}
			,
			async getData() {
				const res = await uni.$u.http.get('/api/carts', {
					params: {
						include: 'goods'
					},
					header: {
						Authorization: 'bearer ' + access_token
					}
				})
				//console.log(res);
				this.goodsList = res.data;		
				//console.log(this.checkList);
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		min-height: 80vh;

		.empty {
			height: 80vh;
		}

		.loading {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.title,
		.price {
			font-weight: 800;
			color: #e83333;
		}

		.cartGoodsList {
			.cartGoods {
				.goodsInfo {
					width: 100%;
					background-color: rgb(251, 250, 251);

					.goodsBaseInfo {
						width: 100%;
						height: 200rpx;
						flex-direction: column;

						.priceNum {
							width: 100%;
						}
					}
				}
			}
		}

		.bottomFixed {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
		}

		/*#ifdef H5*/
		.bottomFixed {
			bottom: 90rpx;
		}

		/*#endif*/
		/*#ifdef MP-WEIXIN*/
		.bottomFixed {
			bottom: 0;
			z-index: 99999;
		}

		/*#endif*/

	}
</style>
